<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- <el-form-item label="订单号">
          <el-input
            v-model="formInline.order_id"
            placeholder="请输入订单号"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="用户名">
          <el-input
            v-model="formInline.uname"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input
            v-model="formInline.id"
            placeholder="请输入用户ID"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="手机号">
          <el-input
            v-model="formInline.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="客服名称">
          <el-input
            v-model="formInline.user_name"
            placeholder="请输入客服名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="客服手机号">
          <el-input
            v-model="formInline.telephone"
            placeholder="请输入客服手机号"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <div class="gauge">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 客服列表 -->
    <div class="text item">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        max-height="600"
      >
        <el-table-column align="center" label="ID" width="70" prop="id">
        </el-table-column>
        <!-- <el-table-column
          prop="order_id"
          align="center"
          label="订单号"
          width="180"
        >
        </el-table-column> -->
        <!-- <el-table-column
          prop="ctime"
          align="center"
          label="下单时间"
          width="180"
        >
        </el-table-column> -->
        <el-table-column prop="nickname" align="center" label="用户名">
        </el-table-column>
        <el-table-column prop="userid" align="center" label="用户ID">
        </el-table-column>
        <el-table-column prop="mobile" align="center" label="手机号">
        </el-table-column>
        <el-table-column prop="cus_name" align="center" label="接待客服">
        </el-table-column>
        <el-table-column prop="telephone" align="center" label="客服手机号">
        </el-table-column>
        <!-- <el-table-column prop="job_number" align="center" label="客服工号">
        </el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >发起会话</el-button
            > -->
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >查看聊天记录</el-button
            >
            <!-- <el-button size="mini" type="primary" @click="lookRemark(scope.row)"
              >查看备注</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40, 50, 60]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      title="历史会话"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <!-- <div slot="header" class="clearfix"> -->
      <el-form :inline="true" :model="formInline1" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input
            v-model="formInline1.word"
            placeholder="请输入关键字"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="gauge">
            <el-button type="primary" @click="onSubmit1">查询</el-button>
            <!-- <el-button type="primary" @click="onReset1">重置</el-button> -->
          </div>
        </el-form-item>
      </el-form>
      <!-- </div> -->
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="packGit"
        border
        style="width: 100%"
        max-height="500"
      >
        <!-- <el-table-column
          label="序号"
          type="index"
          width="70"
          :index="Method"
          align="center"
        >
        </el-table-column> -->
        <el-table-column label="ID" width="70" align="center" prop="id">
        </el-table-column>
        <el-table-column prop="user_name" align="center" label="名称">
        </el-table-column>
        <!-- <el-table-column prop="name" align="center" label="客服账号">
        </el-table-column>
        <el-table-column prop="ctime" align="center" label="客服工号">
        </el-table-column> -->
        <el-table-column prop="sendtime" align="center" label="聊天时间">
        </el-table-column>
        <el-table-column
          prop="message"
          align="center"
          show-overflow-tooltip
          label="聊天内容"
        >
        </el-table-column>
      </el-table>
      <div class="pageUser">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="page1"
          :page-sizes="[10, 150, 200, 300]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
        >
        </el-pagination>
      </div>
    </el-dialog>
    <!-- <div v-if="flotBtn">
      <floatingWindow
        ref="floatBtn"
        :userIds="userIds"
        :listToken="listToken"
        :chat_id="chat_id"
      ></floatingWindow>
    </div> -->
  </el-card>
</template>

<script>
import Vue from "vue";
const bus = new Vue();
import { uploadFiles } from "../../../../utils/api";
import { getHistoryTalk, getHistoryTalkDetail } from "../../../../utils/main";
import floatingWindow from "../../../common/floatBtn.vue";
export default {
  components: {
    floatingWindow,
  },
  data() {
    return {
      chat_id: -1,
      userIds: "",
      //弹窗
      dialogVisible: false,
      dialogVisible2: false,
      flotBtn: false,
      loading: false,
      token: sessionStorage.getItem("token"),
      // 1为商家，2为客服
      seller_user_type: sessionStorage.getItem("seller_user_type"),
      seller_id: sessionStorage.getItem("seller_id"),
      cus_id: sessionStorage.getItem("seller_user_id"),
      seller_user_cus_type: sessionStorage.getItem("seller_user_cus_type"),
      formInline: {
        id: "",
        uname: "",
        phone: "",
        user_name: "",
        telephone: "",
      },
      formInline1: {
        word: "",
      },
      packGit: [],
      tableData: [
        {
          index: "20-02",
          name: "张三",
          avatar: "上海市普陀区金沙江路 1518 弄",
          tel: "16738926942",
          jobNumber: "1902983",
          seller_name: "12372838238",
          msg: "jo123456",
          classify: "水站",
          createTime: "2021年10月10日",
          state: "启用",
          operate: "编辑",
        },
      ],
      listToken: "",
      remarkData: [],
      // 启用停用按钮颜色
      states: "启用",
      // 删除按钮是否可见
      value: false,
      // 启用停用按钮颜色
      btncolor: "success",
      //新增
      form: {
        name: "张三",
        imageUrl: "",
        tel: "16738926942",
        jobNumber: "1902983",
        seller_name: "12372838238",
        msg: "jo123456",
        region: "水站",
      },
      ids: "",
      //分页器
      total: 0,
      limit: 10,
      page: 1,
      total1: 0,
      limit1: 10,
      page1: 1,
      chat_list_id: "",
      //上传图片
      imageUrl: "",
      fileList: [],
      fileType: ["png", "jpg", "jpeg"],
      fileLimit: 1,
      headers: { "Content-Type": "multipart/form-data" },
      websocket: null,
      socket: null,
      timeout: 10000, // 45秒一次心跳
      timeoutObj: null, // 心跳心跳倒计时
      serverTimeoutObj: null, // 心跳倒计时
      timeoutnum: null, // 断开 重连倒计时
      lockReconnect: false, // 防止
      // messsage: "",
      // websocket: null,
      //校验
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        region: [
          { required: true, message: "请输入手机号", trigger: "change" },
        ],
        region: [{ required: true, message: "请输入账号", trigger: "change" }],
        region: [{ required: true, message: "请输入密码", trigger: "change" }],
        region: [{ required: true, message: "请选择分类", trigger: "change" }],
        imageUrl: [
          { required: true, message: "请上传头像", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 重置
    onReset() {
      this.formInline = {
        id: "",
        uname: "",
        phone: "",
        user_name: "",
        telephone: "",
      };
      this.ids = "";
      this.getList();
    },
    // 查询
    onSubmit() {
      this.page = 1;
      if (this.formInline.id === "0") {
        this.ids = "-1";
      } else {
        this.ids = this.formInline.id;
      }
      this.getList();
    },
    onSubmit1() {
      this.page1 = 1;
      this.getDetail();
    },
    // 序号排序
    indexMethod(index) {
      if (this.total < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    // 序号排序
    Method(index) {
      if (this.total1 < this.limit1) {
        return this.total1 - index;
      } else {
        return this.total1 - (this.page1 - 1) * this.limit1 - index;
      }
    },
    // 分页
    handleSizeChange(val) {
      this.limit = val;
      // console.log(`每页 ${val} 条`);
      this.getList();
    },
    // 第几页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    // 分页
    handleSizeChange1(val) {
      this.limit1 = val;
      // console.log(`每页 ${val} 条`);
      this.getDetail();
    },
    // 第几页
    handleCurrentChange1(val) {
      this.page1 = val;
      this.getDetail();
    },
    getDetail() {
      getHistoryTalkDetail(
        this.token,
        this.chat_list_id,
        this.formInline1.word,
        this.page1,
        this.limit1
      ).then((res) => {
        if (res.data.status == true) {
          this.packGit = res.data.data.data;
          this.total1 = res.data.data.total;
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/materilsLogin");
          }
          if (res.data.msg == "此账号没有权限") {
            this.$message.error(res.data.msg);
            this.loading = false;
          }
          let timer = setTimeout(() => {
            this.$message.error(res.data.msg);
          }, 5000);
        }
      });
    },
    // 发起会话，查看聊天记录
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.chat_list_id = row.id;
      this.getDetail();
      // this.flotBtn = true;
      // this.userIds = row.userid;
      // this.listToken = row.token;
      // this.chat_id = row.chatid;
      // this.$nextTick(() => {
      //   this.$refs.floatBtn.dialogVisible = true;
      // });

      // console.log(this.userIds, "ppp");
      // console.log(this.$refs.floatBtn);
      // this.$refs.floatBtn.toggleMenu();
      // this.$refs.floatBtn.$emit("toggleMenu");
      // this.$refs.web.$emit("websocketsend");

      // this.dialogVisible2 = true;
      // console.log(index, row);
    },
    // lookRemark(row) {
    //   this.dialogVisible = true;
    //   getMainCustomerRemarkCheck(this.token, row.order_id).then((res) => {
    //     if (res.data.status == true) {
    //       this.remarkData = res.data.data;
    //     } else {
    //       if (res.data.msg == "token失效,请重新进行登录") {
    //         this.$router.push("/materilsLogin");
    //       }
    //       if (res.data.msg == "此账号没有权限") {
    //         this.$message.error(res.data.msg);
    //         this.loading = false;
    //       }
    //       let timer = setTimeout(() => {
    //         this.$message.error(res.data.msg);
    //       }, 5000);
    //     }
    //   });
    // },

    async getList() {
      this.loading = true;
      // this.websocket = new WebSocket(wsUrl);
      // this.$store.dispatch("websocketsend", this.messsage);
      // 商家端
      if (this.seller_user_type != null) {
        // 商家
        if (this.seller_user_cus_type == "null") {
          let res = await getHistoryTalk(
            this.token,
            "",
            "",
            10,
            this.formInline.uname,
            this.ids,
            this.formInline.user_name,
            this.formInline.telephone,
            this.page,
            this.limit
          );
          if (res.data.status) {
            this.tableData = res.data.data.data || [];
            this.total = res.data.data.total;
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/materilsLogin");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        }
        // 客服
        else if (this.seller_user_cus_type != null) {
          let res = await getHistoryTalk(
            this.token,
            "",
            "",
            this.seller_user_cus_type,
            this.formInline.uname,
            this.ids,
            this.formInline.user_name,
            this.formInline.telephone,
            this.page,
            this.limit
          );
          if (res.data.status) {
            this.tableData = res.data.data.data || [];
            this.total = res.data.data.total;
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/materilsLogin");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        }
      }
      // 平台端
      else {
        // this.tableData = [];
        // this.loading = false;
        let res = await getHistoryTalk(
          this.token,
          "",
          "",
          10,
          this.formInline.uname,
          this.ids,
          this.formInline.user_name,
          this.formInline.telephone,
          this.page,
          this.limit
        );
        if (res.data.status) {
          this.tableData = res.data.data.data || [];
          this.total = res.data.data.total;
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 400);
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/materilsLogin");
          }
          if (res.data.msg == "此账号没有权限") {
            this.$message.error(res.data.msg);
            this.loading = false;
          }
          let timer = setTimeout(() => {
            this.$message.error(res.data.msg);
          }, 5000);
        }
      }
    },

    //关闭
    handleClose(done) {
      done();
    },
  },
  mounted() {
    // var that = this;
    // new Vue().$on("websocketsend", function (msg) {
    //   console.log(msg);
    //   that.websocketsend(msg);
    // });
  },
  created() {
    this.getList();
    // this.initWebSocket();
  },
  beforeDestroy() {
    // this.closeWebSocket();
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.gauge {
  display: flex;
  margin: 0 20%;
}

.oneLine {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.formUser {
  width: 60%;
}
.fenlei {
  position: relative;
  height: 40px;
  /* border: 1px solid red; */
}
.fenlei .fenlei2 {
  position: relative;
  left: 280px;
  top: -40px;
}
/* 查看备注弹出层 */
.beizhu {
  height: 600px;
  box-sizing: border-box;
  overflow: scroll;
}
.libox {
  width: 98%;
  font-size: 18px;
  margin-bottom: 30px;
}
.libox .kefu {
  margin-bottom: 5px;
}
.kefu span {
  margin-right: 20px;
}
.libox .wenzi {
  width: 96%;
  min-height: 60px;
  border: 1px solid black;
  padding: 10px;
  overflow: scroll;
}
</style>